<!DOCTYPE HTML>
<html>
	<head>
			<title>Test HTML5 Canvas</title>
			<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script src="./JS/easel.js" type="text/javascript"></script>
        <script src="./JS/Vector3.js" type="text/javascript"></script>
        <script src="./JS/tools.js" type="text/javascript"></script>
	</head>

	<body onload="countNum()">
		<div id="d1">
		</div>
		<div id="d2" onmouseover="stopCountNum()" onmouseout="countNum()">
			鼠标停留在这里时,停止计数.
		</div>
		<br/>
        <div>
            <input type="input" id="input1" value="1"/>
        </div>
		<div id="c1">
			<canvas id="myCanvas1" width="500" height="500">Your browser does not support the canvas element.</canvas>
		</div>
        <div id="c2">
            <canvas id="myCanvas2" width="500" height="500">Your browser does not support the canvas element.</canvas>
        </div>
	</body>

    <script type="text/javascript">
        var COUNT = 0;
        var Timeout;
        function countNum()
        {
            COUNT++;
            document.getElementById("d1").innerHTML=COUNT;
            Timeout=setTimeout("countNum()",1000);
        }
        function stopCountNum()
        {
            clearTimeout(Timeout);
        }

        var canvas = document.getElementById("myCanvas1");
        var ctx = canvas.getContext("2d");
        var width = ctx.width;
        var height = ctx.height;
        ctx.clearRect(0,0,width,height);
        ctx.translate(100,100);
        ctx.scale(2,2);
        ctx.rotate(Math.PI/4);
        ctx.fillRect(100,10,5,getRandomNumber(-100,100));

        var input1 = document.getElementById("input1");

        var s1 = setInterval(function(){
            console.log("input1.value:" + input1.value);
//            console.log("input1.text:" + input1.text);
        },1000);

    </script>

</html>